<template>
    <div class="home-page">
        <CommonHeader>
            <div>
                <div style="font-size: 24px; font-weight: bold;">中关村国家自主创新示范区</div>
                <div style="font-size: 24px; font-weight: 350">提升国际化发展水平项目支持</div>
            </div>
        </CommonHeader>
        <div class="common-wrap">
            <div class="main-title">助力北京市科技创新发展&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;推进科技资源开放共享</div>
            <div class="home-wrap">
                <div class="sub-wrap">
                    <div class="sub-title">北京市开放科技论文与科学数据资源共享平台</div>
                    <div class="home-intro">
                        开放科学是消除科学、技术和创新之间鸿沟的关键，是快速提升科研实力、引领形成新的科研范式、重塑国际科技治理模式的重要途径。本平台为支持北京市在国际科创中心建设中，加快国际数字化科技资源与国内资源融汇贯通，保障科技文献和数据资源本土化和稳定增长，建设立足北京科技创新、推动京津冀协同发展、具有国际视野的数字化科技资源开放、共享服务平台。
                    </div>
                </div>
                <div class="type-info">
                    <div class="type-name" :class="typeIndex === 2 && 'active'" @click="typeIndex = 2">开放论文</div>
                    <div class="type-name" :class="typeIndex === 1 && 'active'" @click="typeIndex = 1">科学数据</div>
                </div>
                <div>
                    <el-input class="search-input" placeholder="输入作者、标题、关键词搜索" v-model="searchText" trim clearable
                        @keydown.native.enter="toSearch" />
                </div>
            </div>

            <ul class="count-list">
                <li class="count-item">
                    <div class="count">{{ countryCount.toLocaleString() }}个</div>
                    <div class="name">国家</div>
                    <div class="en-name">Countries</div>
                </li>
                <li class="count-item">
                    <div class="count">{{ journalCount.toLocaleString() }}种</div>
                    <div class="name">期刊</div>
                    <div class="en-name">Journals</div>
                </li>
                <li class="count-item">
                    <!-- paperCount 原论文个数 -->
                    <div class="count">{{ paperMetaCount.toLocaleString() }}篇</div>
                    <div class="name">论文</div>
                    <div class="en-name">Articles</div>
                </li>
                <!-- <li class="count-item">
                    <div class="count">{{ scienceDataCount.toLocaleString() }}条</div>
                    <div class="name">科学数据</div>
                    <div class="en-name">Scientific Data</div>
                </li> -->
                <li class="count-item">
                    <div class="count">{{ dataSizeCount.toLocaleString() }}TB</div>
                    <div class="name">数据量</div>
                    <div class="en-name">Data Size</div>
                </li>
            </ul>

            <div class="intro">围绕“2441”涵盖的学科及研究领域，遴选出一批科研用户需要的领域国际高水平期刊论文，和开放科学数据集，服务重点高精尖产业领域用户。</div>
            <div class="intro">资源共建合作支持单位：中国科学院计算机网络信息中心、北京市科学技术研究院科技情报研究所。</div>
            <div class="item-title">支持北京市高精尖产业发展☞高质量开放科技论文</div>
            <div class="item-sub-title">High Quality Open Technology Papers</div>
            <swiper :options="swiperOptions">
                <swiper-slide v-for="item in paperList" :key="item.id">
                    <div class="img-wrap" @click="getPaperItemList(item.name)">
                        <img :src="'./img/sixCube.png'" class="bg-img" />
                        <img :src="item.img || './img/default.png'" class="type-img" />
                        <div class="name">{{ item.name }}</div>
                    </div>
                </swiper-slide>
                <!-- <div class="swiper-pagination" slot="pagination"></div> -->
                <div class="swiper-button-prev" style="color:#fff" slot="button-prev"></div>
                <div class="swiper-button-next" style="color:#fff" slot="button-next"></div>
            </swiper>
            <div class="itemContent" v-loading="paperItemLoading">
                <div class="itemContentDiv" v-for="item in paperItemList" :key="item.id">
                    <!-- <div class="itemImg"><img :src="item.coverImage || './img/default.png'"></div> -->
                    <div class="rightDiv">
                        <div class="itemDiv">
                            <span>{{ item.TYPE === 1 ? '科学数据' : item.oasubjectstr }}</span>
                            <span>{{ item.TYPE === 1 ? item.dsCreateDate : item.oapublicationdate }}</span>
                        </div>
                        <div class="itemTitleDiv">
                            <a style="cursor: pointer;" :title="item.TYPE === 1 ? item.datasetNameCn : item.oatitle"
                                @click="goDetail(item)" target="__blank">{{
                                    item.TYPE === 1 ?
                                    item.datasetNameCn :
                                    item.oatitle }}</a>
                        </div>
                        <div style="padding-top: 10px">
                            {{ item.TYPE === 1 ? '' : item.oacollectiontitle }}
                        </div>
                        <div class="itemSummaryDiv">
                            <p>
                                {{ item.TYPE === 1 ? item.introduction : emptyOaabstract(item.oaabstract) }}
                            </p>
                        </div>
                    </div>
                </div>
                <div style="text-align: right;padding-right: 10px">
                    <el-button v-if="paperItemList.length > 0" @click="checkMore()" type="text">查看更多>></el-button>
                </div>
                <div v-if="!paperItemList || paperItemList.length === 0" style="padding: 20px">
                    暂无数据
                </div>
            </div>
            <div class="item-title">支持北京市高精尖产业发展☞TOP国际科技期刊</div>
            <div class="item-sub-title">Top International Science and Technology Journal</div>
            <div class="tab-wrap">
                <div class="tab">
                    <el-collapse v-model="openDataIndex" accordion style="border-bottom: none; border-top: none">
                        <el-collapse-item :style="{ 'margin-top': item.noChildren ? '30px' : null}" v-for="(item, index) in dataList" :key="item.id" :name="index">
                            <template slot="title">
                                <div class="tab-text"><img :src="require('@/assets/img/house.png')" />{{ item.name }}</div>
                            </template>
                            <div v-for="child in (item.subList || [])" :key="child.id">
                                <el-link style="font-size: 16px" @click="getDataItemList(2, child.nameKey)"
                                    type="primary">{{
                                        child.name }}</el-link>
                            </div>
                        </el-collapse-item>
                    </el-collapse>
                    <div style="margin-top: 140px;" class="tab-txt" @click="getDataItemList(2, '知名出版社')" type="primary"><img :src="require('@/assets/img/data-publish.png')" />知名出版社-Wiley</div>
                </div>
                <div class="tabItem" v-loading="dataItem2Loading">
                    <div class="tabcontent">
                        <ul class="article-list" v-if="dataItemList2?.length > 0">
                            <li class="article-item" v-for="item in dataItemList2" :key="item.id">
                                <!-- <img :src="item.img || './img/default.png'" /> -->
                                <div class="articel-item_content">
                                    <a :href="item.link" @click="$router.push(`/search/2/theme?keyword=${item.oaname}&isPaper=1`)" class="article-item_title">{{ item.oaname }}</a>
                                    <div class="article-item_desc">{{ item.subject }}</div>
                                    <div class="article-item_info">
                                        IF：{{ item.impactFactor }}
                                        <span style="margin-left: 20px">期刊分区：{{ item.partition }}</span>
                                    </div>
                                    <div class="article-item_info">
                                        <span style="width: 200px">开放状态：{{ item.openState }}</span>
                                        <el-link v-if="item.oaUrl || item.oaurl" @click="() => openJournal(item)" style="font-weight: normal;">期刊网站</el-link>
                                    </div>
                                </div>
                            </li>
                        </ul>
                        <div v-else style="padding: 20px">
                            暂无数据
                        </div>
                        <div style="text-align: right;padding-right: 10px">
                            <el-button v-if="paperItemList.length > 0" @click="dataMore(2)" type="text">查看更多>></el-button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="item-title">支持北京市高精尖产业发展☞开放科学数据集</div>
            <div class="item-sub-title">Open Scientific Dataset</div>
            <div class="tab-wrap">
                <div class="tab">
                    <el-collapse v-model="techPaperIndex" accordion style="border-bottom: none; border-top: none">
                        <el-collapse-item v-for="(item, index) in dataList" :key="item.id" :name="index">
                            <template slot="title">
                                <div class="tab-text"><img :src="require('@/assets/img/house.png')" />{{ item.name }}</div>
                            </template>
                            <div v-for="child in (item.subList || [])" :key="child.id">
                                <el-link style="font-size: 16px" @click="getDataItemList(1, child.nameKey)"
                                    type="primary">{{ child.name }}</el-link>

                            </div>
                        </el-collapse-item>
                    </el-collapse>
                    <!-- <div class="tab-txt" @click="getDataItemList(1, '知名出版社')" type="primary"><img :src="require('@/assets/img/data-publish.png')" />知名出版社-Wiley</div> -->
                </div>
                <div class="tabItem" v-loading="dataItemLoading">
                    <div class="tabcontent">
                        <ul class="article-list" v-if="dataItemList?.length > 0">
                            <li class="article-item" v-for="item in dataItemList" :key="item.id">
                                <!-- <img :src="item.img || './img/default.png'" /> -->
                                <div class="articel-item_content">
                                    <!-- TODO -->
                                    <a :href="item.link"  @click="() => {if(!item.sid){ return } $router.push(`/data/${item.sid}`)}" class="article-item_title">{{ item.datasetNameCn }}</a>
                                    <div class="article-item_desc">{{ item.introduction }}</div>
                                    <div class="article-item_info">{{ item.submitAgency }} &nbsp; | &nbsp; {{
                                        item.storageNum }}</div>
                                    <div class="article-item_info">共享状态：{{ item.sharedScope }}</div>
                                </div>
                            </li>
                        </ul>
                        <div v-else style="padding: 20px">
                            暂无数据
                        </div>
                        <div style="text-align: right;padding-right: 10px">
                            <el-button v-if="paperItemList.length > 0" @click="dataMore(1)" type="text">查看更多>></el-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <CommonFooter />
    </div>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
import { dataList, paperList } from '@/data/home';
import { post } from '@/common/request';

export default {
    name: "home-page",
    components: {
        Swiper,
        SwiperSlide
    },
    data() {
        return {
            swiperOptions: {
                // pagination: {
                //     el: '.swiper-pagination',
                //     clickable: true,
                // },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                autoplay: true,
                loop: true,
                speed: 500,
                slidesPerView: 5,
                spaceBetween: 30,
                centeredSlides: true,
                watchSlidesProgress: false,
                slideToClickedSlide: true,
            },
            typeIndex: 2,
            techPaperIndex: 0,
            openDataIndex: 0,
            searchText: '',
            countryCount: 0,
            paperCount: 0,
            journalCount: 0,
            paperMetaCount: 0,
            scienceDataCount: 0,
            dataSizeCount: 0,
            dataList: dataList,
            moreText: '新一代信息技术',
            dataIndustryClass: '',
            data2IndustryClass: '',
            dataItemLoading: false,
            dataItem2Loading: false,
            dataItemList: [],
            dataItemList2: [],
            paperList: paperList,
            paperItemLoading: false,
            paperItemList: [],
        }
    },
    created() {
    },
    async mounted() {
        this.getCount()
        this.getPaperItemList("新一代信息技术")
        this.getDataItemList(1, "新一代信息技术")
        this.getDataItemList(2, "新一代信息技术")
    },
    methods: {
        async getCount() {
            const res = await post('/dataset/homePageCount')
            if (res?.code === 200) {
                this.countryCount = res.data?.oaCountryNum || 0
                this.paperCount = res.data?.oaFullTextNum || 0
                this.paperMetaCount = 13558539
                // res.data?.oaMetaDataNum || 0
                this.journalCount = res.data?.oaJournalNum || 0
                this.scienceDataCount = res.data?.datasetNum || 0
                this.dataSizeCount = res.data?.datasetStorage || 0
            }
        },
        async getPaperItemList(name) {
            this.paperItemLoading = true
            this.moreText = name
            const res = await post('/dataset/queryByIndusClass', {
                industryClass: name || ''
            }).catch(err => ({ code: 300, message: String(err) }))
            this.paperItemLoading = false
            if (res?.code === 200) {
                this.paperItemList = [
                    ...(res.data?.dsInfo || []).map(v => ({ ...v, TYPE: 1 })),
                    ...(res.data?.oaInfo || []).map(v => ({ ...v, TYPE: 2 })),
                ]
            }
        },
        async getDataItemList(type, name) {
            type === 1 ? this.dataItemLoading = true : this.dataItem2Loading = true
            const res = await post('/dataset/top50Search', {
                type,
                industryClass: name || '',
            }).catch(err => ({ code: 300, message: String(err) }))
            type === 1 ? this.dataItemLoading = false : this.dataItem2Loading = false
            if (res?.code === 200) {
                if (type === 1) {
                    this.dataIndustryClass = name
                    this.dataItemList = res.data || []
                } else {
                    this.data2IndustryClass = name
                    this.dataItemList2 = res.data || []
                }
            }
        },
        goDetail(item) {
            if (item.TYPE === 1) {
                this.$router.push(`/data/${item.id}`)
                return
            }
            this.$router.push(`/detail/${item.id}`)
        },
        toSearch() {
            if (!this.searchText) {
                return
            }
            this.$router.push({
                path: `/search/${this.typeIndex}`,
                query: {
                    keyword: encodeURIComponent(this.searchText)
                }
            })
        },
        checkMore() {
            const theme = this.paperList.find(v => v.name === this.moreText)?.id || 1
            this.$router.push({
                path: `/search/${this.typeIndex}/${theme}`,
                query: {
                    // keyword: encodeURIComponent(this.moreText),
                    keyword: '',
                }
            })
        },
        dataMore(type){
            if(type === 1){
                const theme = this.paperList.find(v => v.name === this.dataIndustryClass)?.id || 1
                this.$router.push({
                    path: `/search/${type}/${theme}`,
                    query: {
                        keyword: '',
                    }
                })
                // this.$router.push({
                //     path: `/search/${type}/theme`,
                //     query: {
                //         keyword: this.dataIndustryClass,
                //     }
                // })
            }else if(type === 2){
                const theme = this.paperList.find(v => v.name === this.data2IndustryClass)?.id || 1
                this.$router.push({
                    path: `/search/${type}/${theme}`,
                    query: {
                        keyword: '',
                    }
                })
                // this.$router.push({
                //     path: `/search/${type}/theme`,
                //     query: {
                //         keyword: this.data2IndustryClass,
                //     }
                // })
            }
        },
        openJournal(item) {
            const url = item.oaUrl || item.oaurl
            window.open(url)
        },
        emptyOaabstract(str){
            if(str === "<![CDATA[]]>"){
                return ""
            }else{
                return str
            }
        }
    },
}
</script>

<style lang="less" scoped>
.home-wrap {
    padding: 20px;
    background: rgba(231, 240, 244, .6);
}

.main-title {
    margin-top: -140px;
    padding: 6px 0 20px;
    font-size: 37px;
    font-weight: bold;
    line-height: 40px;
    text-align: center;
    color: #fff;
}

.sub-title {
    padding: 2px 0;
    font-size: 24px;
    font-weight: bold;
    color: #fff;
}

.home-intro {
    margin: 10px 0;
    font-size: 21px;
    line-height: 30px;
    color: #fff;
}

.intro {
    margin: 10px 0;
    font-size: 18px;
    line-height: 30px;
}

.sub-wrap {
    padding: 6px 12px;
    background: rgba(0, 32, 96, .85);
}

.item-title {
    padding: 20px 0 6px;
    line-height: 30px;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
}

.item-sub-title {
    padding-bottom: 20px;
    line-height: 20px;
    font-size: 18px;
    color: #777;
    text-align: center;
}

.type-info {
    padding-top: 10px;
    display: flex;
    align-items: center;
    color: @darkColor;
    font-size: 18px;

    .type-name {
        position: relative;
        padding: 6px 12px;
        font-size: 24px;
        line-height: 30px;
        cursor: pointer;
        border: 1px solid @darkColor;
        border-bottom: none;

        &.active {
            color: #fff;
            background: @darkColor;
        }
    }


}

.search-input {
    border-color: @primaryColor;

    /deep/ .el-input__inner {
        height: 50px;
        line-height: 50px;
        border: 1px solid @darkColor;
        font-size: 24px;
        border-radius: 0;

        &::placeholder {
            color: #777;
        }
    }
}

.count-list {
    margin: 30px auto;
    padding: 0 100px;
    display: flex;
    color: @darkColor;
    justify-content: space-around;

    .count-item {
        margin-right: 20px;
        padding: 10px 20px 10px 0;
        color: @primart2Color;
        text-align: center;

        .count {
            font-size: 30px;
            line-height: 42px;
        }

        .name {
            font-size: 32px;
        }

        .en-name {
            position: relative;
            font-size: 20px;
            font-weight: normal;
            color: #777;

            &:after {
                position: absolute;
                content: "";
                margin-left: -40px;
                left: 50%;
                bottom: -8px;
                width: 80px;
                height: 2px;
                background: @darkColor;
                border-radius: 2px;
            }
        }
    }
}

.img-wrap {
    position: relative;
    padding: 40px 0px;
    box-sizing: border-box;
    cursor: pointer;
    opacity: .9;

    .bg-img {
        position: absolute;
        left: 0;
        top: -10px;
        width: 100%;
        height: 100%;
        z-index: -1;
    }

    .type-img {
        display: block;
        margin: 10px auto 0;
        width: 60px !important;
        height: 60px !important;
    }

    .name {
        padding: 20px 0;
        font-size: 14px;
        font-weight: bold;
        text-align: center;
        color: #fff;
    }

    &:hover {
        opacity: 1;
    }
}

.itemContent {
    padding: 20px 12px;
    border: 1px solid #ccc;
    background: #fff;
    margin-top: 20px;
}

.itemContentDiv {
    display: flex;
    justify-content: left;
    margin: 10px auto;
    padding-bottom: 20px;
    border-bottom: 1px solid #ddd;


    .itemImg {
        width: 150px;
        height: 160px;
        margin-right: 30px;

        img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            margin: 10px;
        }

    }

    .rightDiv {
        padding-right: 20px;
        flex: 1;
    }

    .itemDiv {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        font-size: 14px;
        line-height: 30px;
        color: #aaa;
    }

    .itemTitleDiv {
        font-size: 18px;
        font-weight: bold;
        margin-top: 10px;
        line-height: 30px;
        padding-right: 20px;

        a {
            text-align: left;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            text-overflow: ellipsis;
            color: #000;
            text-decoration: none;

            &:hover {
                text-decoration: underline;
            }
        }
    }

    .itemSummaryDiv {
        display: flex;
        justify-content: left;
        margin-top: 10px;
        padding-right: 20px;

        p {
            padding: 0px;
            margin: 0px;
            font-size: 14px;
            line-height: 24px;
            color: #aaa;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            text-overflow: ellipsis;
        }
    }
}

.moreRe {
    padding: 20px 0 0;
    text-align: center;
    font-weight: bold;
    font-size: 16px;

    a {
        color: #000;
        text-decoration: none;
    }
}

.tab-type {
    /deep/ .el-radio-button__inner {
        border-radius: 0;
    }
}

.tab-wrap {
    display: flex;
    border: 1px solid #ccc;
}

.tab {
    padding-bottom: 30px;
    border-right: 1px solid #ccc;
    background-color: #fff;
    width: 30%;

    .el-icon-s-home {
        margin-right: 6px;
        color: @primaryColor;
    }

    /deep/ .el-collapse-item {
        padding: 8px 10px;
        font-size: 18px;
    }

    /deep/ .tab-text {
        font-size: 21px !important;
    }

    /deep/ .el-link {
        &::after {
            border-color: #000 !important;
        }
    }

    /deep/ .el-link--inner {
        color: #000;
        font-size: 18px;
        font-weight: normal;
    }

    .tab-text {
        display: flex;
        align-items: center;
        line-height: 20px;
        font-size: 16px;

        img {
            margin-right: 10px;
            width: 20px;
            height: 20px;
        }
    }

    .tab-txt {
        margin-top: 60px;
        display: flex;
        align-items: center;
        padding: 8px 10px;
        font-size: 21px;
        font-weight: 500;
        line-height: 20px;
        color:#303133;
        cursor: pointer;
        &:hover{
            text-decoration: underline;
        }

        img {
            margin-right: 10px;
            width: 24px;
            height: 24px;
        }
    }
}

.tabcontent {
    padding: 0px 12px;
}

.dropdown-content a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
    background-color: #DEEBF7;
    color: white;
}

.fa-home {
    margin-right: 10px;
    color: #1487f4;
}

.moreIns {
    display: flex;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    margin-top: 10px;
    color: #000;
    text-decoration: none;
}

.tabItem {
    display: flex;
    flex-direction: column;
    width: 70%;
}

.article-item {
    padding: 10px;
    display: flex;
    border-bottom: 1px solid #ddd;

    &:last-child {
        border-bottom: none;
    }

    img {
        width: 150px;
        height: 120px;
        margin: 10px 20px;
    }

    .articel-item_content {
        padding-top: 10px;
    }

    .article-item_title {
        font-size: 21px;
        padding-right: 20px;
        margin-bottom: 10px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
        color: #000;
        // font-weight: bold;
        text-decoration: none;

        &:hover {
            text-decoration: underline;
            cursor: pointer;
        }
    }

    .article-item_desc {
        font-size: 18px;
        line-height: normal;
        padding: 0px;
        margin: 0px;
        line-height: 30px;
        color: #777;
        // width: 600px;
        overflow: hidden;
        // white-space: nowrap;
        // text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
    }

    .article-item_info {
        display: flex;
        align-items: center;
        font-size: 14px;
        line-height: normal;
        padding: 2px 0;
        margin: 0px;
        line-height: 24px;
        color: #666;
    }
}





.reReport {
    display: flex;
    justify-content: space-between;
}

.intReport {
    width: 49%;
    border-right: solid #f1f1f1 5px;
}

.reportImg {
    width: 160px;
    height: 200px;
}

.reportImg img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.intReportDiv {
    display: flex;
    justify-content: space-between;
}

.nstlReport {
    width: 49%;
}

.nstlReportDiv {
    display: flex;
    justify-content: space-between;
}

.spotLights {
    display: flex;
    justify-content: space-between;
}

.express {
    display: flex;
    justify-content: left;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    position: relative;
    padding: 20px 40px 10px 20px;
    text-align: center;
}

.expressTitle {
    display: block;
    width: 30px;
    height: 180px;
    color: #fff;
    text-align: center;
    position: relative;
    left: -30px;
    background: url("@/assets/img/tag.png");
    background-size: 38px 180px;
    top: -50px;
    font-weight: bold;
    padding-top: 14px;
    z-index: 99;
}

.expressDiv {
    display: flex;
    justify-content: space-between;
}

.expressImg {
    height: 180px;
}

.expressItem {
    margin: auto 20px;
}

.expressImg img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

ul.breadcrumb {
    padding: 10px 0px;
    list-style: none;
}

ul.breadcrumb li {
    display: inline;
    font-size: 16px;
}

ul.breadcrumb li+li:before {
    padding: 8px;
    color: black;
    content: ">\00a0";
}

.hotSearch {
    display: flex;
    justify-content: left;
    margin: 20px auto;
}

.hotSearch span {
    font-size: 17px;
}

.hotSearch a {
    margin-right: 20px;
    font-size: 16px;
    color: brown;
}

.tagInfo {
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    margin: 20px auto;
}

.resultDiv {
    display: flex;
    justify-content: left;
    border-bottom: #0a58ca dashed 1px;
    padding: 20px 0px;
}

.resultImg {
    width: 150px;
    height: 140px;
}

.resultImg img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    margin-right: 10px;
}

.resultItem {
    width: 85%;
}

.resultTitle {
    font-size: 18px;
    margin: 10px;
    padding-right: 20px
}

.resultTitle a {
    text-align: left;
}

.resultSummary {
    display: flex;
    justify-content: left;
    margin: 10px;
    /*padding-right: 20px;*/
}

.resultSummary p {
    font-size: 16px;
    line-height: normal;
    border-left: 0px;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}

.resultTag {
    display: flex;
    justify-content: left;
    margin: 10px;
    font-size: 16px;
}

.pageViewL {
    margin: auto 10px;
}

.pageViewS {
    display: none;
}

.relations {
    display: flex;
    justify-content: space-between;
    background: white;
    margin: 20px auto;
    padding: 5px;
}

.relationsDiv {
    width: 30%;
    padding-left: 20px;
}

.relationsImg {
    width: 100%;
    height: 220px;
    margin: 10px auto;
}

.relationsImg img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.relationsTitle {
    font-size: 16px;
    margin-top: 10px;
}

.relationsAuthor {
    font-size: 16px;
    margin: 10px auto;
}

.relationsAuthor span {
    color: #1487f4;
    padding-right: 5px
}

.fieldSource {
    display: flex;
    justify-content: left;
}

.fieldSource div {
    font-size: 16px;
    margin-right: 20px;
    font-size: 16px;
}

.holding {
    display: flex;
    justify-content: left;
    margin-top: 20px;
}

.holding div {
    font-size: 16px;
    margin-right: 20px;
    font-size: 16px;
}

.agency {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.agencyDiv {
    width: 49%;
    display: flex;
    justify-content: space-between;
    border-bottom: #1b82d1 dashed 1px;
    background: white;
}

.agencyImg {
    width: 160px;
    height: 180px;
    padding: 5px;
}

.agencyImg img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.agencyItem {
    width: 80%;
    padding: 10px;
}

.agencyItemUl {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 5px;
    list-style: none;
}

.agencyItemUl li {
    width: 180px;
    text-align: center;
    background: #858dff;
    margin: 5px;
    color: white;
    font-size: 16px
}

.fieldSelect {
    background-color: #0a58ca;
    color: white;
    width: 9rem;
    margin-right: 20px;
}

.agencyDetailDiv {
    display: flex;
    justify-content: space-between;
}

.agencyDetailImg {
    width: 200px;
    height: 200px;
}

.agencyDetailImg img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.agencyDetailM {
    width: 20%;
}

.agencyDetailM li {
    width: 180px;
    text-align: left;
    background: #858dff;
    margin: 5px;
    color: white;
    padding: 10px;
}

.agencyDetailField {
    width: 60%;
}

.agencyDetailItem {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.aDItemDiv {
    width: 49%;
    display: flex;
    justify-content: left;
    border-bottom: #0a58ca dashed 1px;
    padding: 20px 0px;
}

.aDItemImg {
    width: 150px;
    height: 150px;
}

.aDItemImg img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    margin-right: 10px;
}

.aDItemField {
    width: 90%;
}

.aDItemTitle {
    font-size: 18px;
    margin: 10px 0px 10px 10px;
}

.aDItemTitle a {
    text-align: left;
}

.expert {
    display: flex;
    justify-content: left;
    margin: 20px auto;
    flex-wrap: wrap;
}

.expertDiv {
    width: 49%;
    display: flex;
    justify-content: left;
    border-bottom: 1px dashed #0dcaf0;
    padding: 10px 0px;
}

.expertImg {
    width: 180px;
    height: 180px;
}

.expertImg img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.expertItem {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-left: 0px;
    list-style: none;
}

.expertItem li {
    width: 180px;
    text-align: center;
    background: #858dff;
    margin: 5px;
    color: white;
    font-size: 16px
}

.expertDetail {
    display: flex;
    justify-content: space-between;
}

.expertDetailIntro {
    width: 25%;
}

.expertDetailImg {
    width: 200px;
    height: 220px;
}

.expertDetailImg img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.expertDetailField {
    width: 75%;
}

.expertDetailItem {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.eDItemDiv {
    width: 49%;
    display: flex;
    justify-content: left;
    border-bottom: #0a58ca dashed 1px;
    padding: 20px 0px;
}

.eDItemImg {
    width: 150px;
    height: 150px;
}

.eDItemImg img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    margin-right: 10px;
}

.eDItemField {
    width: 90%;
}

.eDItemTitle {
    font-size: 16px;
    margin: 10px 0px 10px 10px;
}

.eDItemSource {
    display: flex;
    justify-content: left;
    margin: 10px;
    font-size: 16px;
}

.expressList {
    display: flex;
    justify-content: space-between;
    border: #1b82d1 dashed 1px;
    background: white;
}

.expressListImg {
    width: 239px;
    height: 334px;
    margin: 20px auto;
}

.expressListImg img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    box-shadow: 3px 1px 10px rgba(0, 0, 0, 0.5)
}

.expressListItem {
    width: 75%;
    margin-top: 10px;
}

.qihaoIntro {
    display: flex;
    justify-content: left;
    font-size: 16px;
    margin: 20px auto;
}

.qihao1 {
    margin: 50px auto 20px 100px;
}

.qihao2 {
    margin: 50px auto 20px 50px;
}

.qihao {
    display: flex;
    justify-content: space-between;
}

.expressMore {
    margin-left: 50px;
}

.expressListTitle {
    font-size: 18px;
    line-height: 1.5em;
}

.advanceS {
    border-left: #e4e3e3 1px solid;
    border-right: #e4e3e3 1px solid;
}

.timeLineChart {
    padding-bottom: 50px;
    border-bottom: solid black 1px;
}
</style>